<script setup>
import { ref, watch, computed } from "vue";
import '@material/web/iconbutton/icon-button.js';
import '@material/web/button/text-button.js';
import '@material/web/textfield/outlined-text-field.js';

const props = defineProps(["value", "max"]);
const emit = defineEmits(["jump"]);

const leftCount = 3;
const rightCount = 3;
const mediumCount = 3;

const value = computed(() => parseInt(props.value || 1));
const max = computed(() => parseInt(props.max || 1));

const inputValue = ref(value.value);
watch(() => value.value, () => {
  inputValue.value = value.value;
});

const mediumLeftSize = (mediumCount - 1) / 2;
const mediumRightSize = mediumCount - mediumLeftSize - 1;
const leftSize = computed(() => Math.max(Math.min(value.value - mediumLeftSize - 1, leftCount), 0));
const leftEllipsis = computed(() => (value.value - mediumLeftSize) > (leftCount + mediumLeftSize));
const rightSize = computed(() => Math.max(Math.min(max.value - value.value - mediumRightSize, rightCount), 0));
const rightEllipsis = computed(() => value.value + mediumRightSize < max.value - rightCount);
const mediumLeftRealSize = computed(() => Math.min(value.value - 1, mediumLeftSize));
const mediumRightRealSize = computed(() => Math.min(max.value - value.value, mediumRightSize));
</script>

<template>
  <div class="pager">
  	<md-icon-button :disabled="value <= 1" @click="emit('jump', value - 1)">
  	  <md-icon>arrow_back</md-icon>
  	</md-icon-button>
  	<div class="pages" role="presentation">
      <md-text-button v-for="i in leftSize" @click="emit('jump', i)">{{ i }}</md-text-button>
      <div v-if="leftEllipsis">…</div>
      <md-text-button v-for="i in mediumLeftRealSize" @click="emit('jump', value - i)">{{ value - i }}</md-text-button>
      <md-text-button class="selected">{{ value }}</md-text-button>
      <md-text-button v-for="i in mediumRightRealSize" @click="emit('jump', value + i)">{{ value + i }}</md-text-button>
      <div v-if="rightEllipsis">…</div>
      <md-text-button v-for="i in rightSize" @click="emit('jump', max - rightSize + i)">{{ max - rightSize + i }}</md-text-button>
  	</div>
  	<md-icon-button :disabled="value >= max" @click="emit('jump', value + 1)">
  	  <md-icon>arrow_forward</md-icon>
  	</md-icon-button>
  	<form ref="pagerForm" @submit.prevent="emit('jump', inputValue)">
      转到 <md-outlined-text-field
            type="number"
            required min="1" :max="max" step="1"
            v-model="inputValue"
            @keypress.enter.prevent="() => {$refs.pagerForm.requestSubmit()}" /> 页
      <md-text-button type="submit">
        <md-icon>
		  subdirectory_arrow_right
		</md-icon>	
      </md-text-button>
  	</form>
  </div>
</template>

<style scoped>
  .pager {
    --_pager-height: 48px;
    --_pager-item-size: 36px;
    display: flex;
    align-items: center;
    height: var(--_pager-height);
    padding: 12px;
  }
  
  .pager md-icon-button, .pages md-text-button, .pager form md-text-button {
    min-width: var(--_pager-item-size);
    height: var(--_pager-item-size);
    padding: 10px;
  }
  
  .pager > .pages {
    display: flex;
    align-items: center;
  }
  
  .pages > * {
    margin: 0 4px;
  }
  
  .pager md-text-button {
    --md-sys-color-primary: var(--md-sys-color-on-background);
  }
  
  .pager md-text-button.selected {
    --md-sys-color-primary: inherit;
  }
  
  .pager form {
    margin-left: 16px;
    display: flex;
    align-items: center;
  }
  
  .pager form md-text-button {
    margin-left: 8px;
  }
  
  .pager md-outlined-text-field {
    height: var(--_pager-height);
    width: 96px;
    margin: 0 8px;
  }
</style>
